<template>
  <!-- 父组件 -->
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 头部结构组件 根节点  -->
        <!-- is-root 根节点 -->
        <tree-tools
          :node-data="company"
          is-root
          @add-depts="addDepts"
        />

        <!-- 内容 树型数据 data展示数据 default-expand-all 默认展开所有节点-->
        <!-- 如果后端提供的不是label和children，需要提供props对后端提供的字段重新命名 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <template #default="{data}">
            <!-- 内容结构组件 父传子  接收子传的渲染列表事件-->
            <tree-tools
              :node-data="data"
              @del-depts="getDepartMentsList"
              @add-depts="addDepts"
              @edit-depts="editDepts"
            />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 弹框组件 父传子showDialog   close-dialog子传父  nodeData数据传递给儿子(弹框组件)，添加时需要用到里面的pid-->
    <!-- depts 父传子 传递列表数据给弹框子组件 -->
    <!-- add 子传父 渲染列表  -->
    <!--  完整写法 @update:showDialog="showDialog =$event" -->
    <!--  简写    :show-dialog.sync="showDialog" -->
    <add-dialog
      ref="addDeptDialog"
      :show-dialog.sync="showDialog"
      :node-data="nodeData"
      :depts="depts"
      @add="getDepartMentsList"
    />
    <!-- <add-dialog
      ref="addDeptDialog"
      :show-dialog="showDialog"
      :node-data="nodeData"
      :depts="depts"
      @close-dialog="closeDialog"
      @add="getDepartMentsList"
    /> -->

  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
// 导入获取树形列表数据api
import { reqGetDepartments } from '@/api/departments'
// 调用转换成树形数据的方法
import { tranListToTreeData } from '@/utils/index'
import AddDialog from './components/add-dept.vue'
// 混入
import hello from '@/mixins/hello'
export default {
  name: 'Departments',
  components: { treeTools, AddDialog },
  mixins: [hello], // 混入 数据
  data() {
    return {
      showDialog: false,
      nodeData: {},
      depts: [],
      loading: false,
      // 头部数据
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 下面内容数据
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    this.getDepartMentsList() // 调用api，获取组织架构列表数据
    // mixins混入
    console.log(this.mixinsName)
    this.mixinsHello()
  },
  methods: {
    async getDepartMentsList() {
      this.loading = true // 开启loading
      const { data: { companyName, depts }} = await reqGetDepartments()
      // console.log('组织架构列表名字', companyName)
      // console.log('组织架构列表数据', JSON.parse(JSON.stringify(depts)))
      this.company = {
        name: companyName, // 传智教育，头部名字
        manager: '负责人',
        id: '' // 一级部门的pid都为空
      }
      const tree = tranListToTreeData(depts, '') // 将列表数据和pid为空的一级部门传递过去
      // this.departs = depts // 组织架构列表数据
      this.departs = tree
      this.depts = depts // 传递列表数据给弹框组件
      this.loading = false // 关闭loading
    },
    // 添加
    addDepts(nodeData) {
      this.showDialog = true // 打开弹窗
      this.nodeData = nodeData // 在属性上传递给添加弹框
      // console.log('儿子给我的', nodeData)
    },
    // 编辑
    editDepts(nodeData) {
      this.showDialog = true // 打开弹窗
      this.nodeData = nodeData // 数据赋值
      this.$refs.addDeptDialog.getEmployeesList() // 调用add弹窗组件实例的获取员工列表的方法
      // this.$refs.addDeptDialog.getDepartDetail(nodeData.id) // 调用add弹窗组件实例的获取员工详情的方法并传入id
      this.$nextTick(() => {
        this.$refs.addDeptDialog.getDepartDetail()
      })
    },
    closeDialog(flag) {
      // console.log(flag) // flag为子传父的false值
      this.showDialog = flag
    }
  }

}

</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
// 按钮样式
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点 （小人图标）
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
